feat(nextjs): export Mosaic UserButton from an experimental subpath - #9338
feat(nextjs): export Mosaic UserButton from an experimental subpath#9338alexcarpenter wants to merge 11 commits into
Conversation
🦋 Changeset detectedLatest commit: b80d48a The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
!snapshot mosaic-user-button |
|
!snapshot mosaic-user-button |
This comment has been minimized.
This comment has been minimized.
|
!snapshot mosaic-user-button |
This comment has been minimized.
This comment has been minimized.
|
!snapshot |
This comment has been minimized.
This comment has been minimized.
2510022 to
f20871a
Compare
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
API Changes Report
Summary
🔴 Breaking changes index (1)Every breaking change, up front. Full diffs are in the package sections below.
@clerk/uiCurrent version: 1.29.1 Subpath
|
f20871a to
f0a356d
Compare
|
!snapshot |
This comment has been minimized.
This comment has been minimized.
f0a356d to
f34b620
Compare
91908c3 to
4644c64
Compare
4644c64 to
eebec70
Compare
eebec70 to
c3bb9d7
Compare
c3bb9d7 to
2259a58
Compare
Adds `@clerk/nextjs/experimental/mosaic` (via `@clerk/react` and `@clerk/ui`) so the Mosaic UserButton can mount directly in a host app's tree, plus the matching `experimental/mosaic/styles.css`. The `@clerk/ui` mosaic entry is now a client boundary in whole (the bundle collapses the per-file directives) and is guarded against Emotion creeping back in, which meant replacing the UserButton trigger skeleton with StyleX.
The experimental subpath pointed at `src/mosaic/styles`, which is the StyleX build barrel: it pulls every migrated component into the graph so one stylesheet can be extracted. Publishing it made all of those components, and the headless primitive types behind them, part of the API. Give the export its own narrow entry instead. `@clerk/headless` is private, so leaving it external published a dependency that 404s on install. Bundling it broke differently: the declaration builder cannot follow the re-export chains in its emitted `dist/*.d.ts`. Correct the `tsconfig.mosaic.json` paths so it resolves to source (primitives live under `src/primitives`, so the old wildcard missed menu, popover, dialog and tabs and silently fell back to `dist`). StyleX moves to devDependencies and gets bundled: it compiles away at build time, so consumers should not inherit our version.
Keeps the experimental surface to the component and the props it takes; everything behind it stays internal.
Locks the props a consumer writes against `@clerk/nextjs/experimental/mosaic`: what the switcher modes are called, that a routing URL cannot ask for a modal, and that a menu row or profile page has to be one of its two shapes.
Floating UI arrives through the bundled @clerk/headless primitives, so leaving it external made it the one install this entry still demanded. SDKs inline this bundle so consumers need nothing beyond React and @clerk/shared.
…r trees Left external, the re-export resolved from the consumer's tree at runtime, which made @clerk/ui a dependency and installed its whole graph (Emotion, the Solana wallet adapters, ...) for every consumer, Mosaic or not.
The two tests guarding `mode` and `modePriority` against each other's wording go away with the divergence they guarded.
Pins the return shape: `{ name, slug? }`, `null` to decline, no arguments in.
Description
Stacked on #9191.
Adds an experimental subpath so Mosaic components mount directly in the host app's tree rather than being rendered by clerk-js.
UserButtonis the first one. It reads Clerk through hooks, so aClerkProviderabove it is all it needs:Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change